<template>
  <div class="box-shadow">
    <el-tabs v-model="accesequipType">
      <el-tab-pane :label="$t('充电桩')" name="0">
        <div>
          <!-- 搜索 -->
          <div class="search-area">
            <div class="form">
              <el-form
                :model="listQuery"
                ref="listQuery"
                size="small"
                :inline="true"
                label-width="188px"
              >
                <el-form-item
                  :label="$t('充电桩名称') + '：'"
                  prop="chargeName"
                  style="display: flex; align-items: center"
                >
                  <el-input
                    v-model="listQuery.chargeName"
                    :placeholder="$t('请输入')"
                    clearable
                    size="medium"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div class="search-area-btn btns">
              <div
                @click="serachBtn"
                class="serch-btn cuver-point"
                v-hasPermi="['deploy:accesEquit:cdzsearch']"
              >
                {{ $t("搜索") }}
              </div>
              <div
                @click="resetFormBtn('listQuery')"
                class="reset-btn cuver-point"
                v-hasPermi="['deploy:accesEquit:cdzreset']"
              >
                {{ $t("重置") }}
              </div>
            </div>
          </div>
          <!-- 表格 -->
          <div class="table">
            <div class="self">
              <el-table
                ref="tableRef"
                :data="cdzTableData"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column align="center" prop="chargeId" label="ID">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="chargeName"
                  :label="$t('充电桩名称')"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="chargeIp"
                  :label="$t('关联充电点')"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="instanceName"
                  :label="$t('充电点位置')"
                >
                </el-table-column>
                <!-- <el-table-column
                  align="center"
                  prop="frontPoints"
                  :label="$t('前置点位置')"
                >
                </el-table-column> -->
                <el-table-column
                  align="center"
                  prop="chargeStatus"
                  :label="$t('状态')"
                >
                  <!-- 充电桩状态(0:离线 1：关闭 2：开启 3：服务未开启) -->
                  <template slot-scope="scope">
                    <span
                      :style="`color:${
                        scope.row.chargeStatus == 0
                          ? '#FF5562'
                          : '' || scope.row.chargeStatus == 2
                          ? '#73F6AF'
                          : ''
                      }`"
                      >{{ scope.row.chargeStatus | getStatus }}</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('门')" name="1">
        <div>
          <!-- 搜索 -->
          <div class="search-area">
            <div class="form">
              <el-form
                :model="listQuery"
                ref="listQuery"
                size="small"
                :inline="true"
                label-width="115px"
              >
                <el-form-item :label="$t('门名称') + '：'" prop="doorName">
                  <el-input
                    v-model="listQuery.doorName"
                    :placeholder="$t('请输入')"
                    clearable
                    size="medium"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <el-form-item :label="$t('门类型') + '：'">
                  <el-checkbox-group v-model="listQuery.doorTypes">
                    <el-checkbox label="0">{{ $t("防火门") }}</el-checkbox>
                    <el-checkbox label="1">{{ $t("卷帘门") }}</el-checkbox>
                    <el-checkbox label="2">{{ $t("对开门") }}</el-checkbox>
                    <el-checkbox label="3">{{ $t("挡鼠板") }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </div>
            <div class="search-area-btn btns">
              <div
                @click="serachBtn"
                class="serch-btn cuver-point"
                v-hasPermi="['deploy:accesEquit:doorsearch']"
              >
                {{ $t("搜索") }}
              </div>
              <div
                @click="resetFormBtn('listQuery')"
                class="reset-btn cuver-point"
                v-hasPermi="['deploy:accesEquit:doorreset']"
              >
                {{ $t("重置") }}
              </div>
            </div>
          </div>
          <!-- 表格 -->
          <div class="table">
            <div class="self">
              <el-table
                ref="tableRef"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column align="center" prop="doorId" label="ID">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="doorName"
                  :label="$t('门名称')"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="doorType"
                  :label="$t('门类型')"
                >
                  <template slot-scope="scope">
                    {{ scope.row.doorType | getDoors }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="doorIp"
                  :label="$t('IP地址')"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="inOpenPosition"
                  :label="$t('关联关键点1')"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="inClosePosition"
                  :label="$t('关键点1位置')"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="outOpenPosition"
                  :label="$t('关联关键点2')"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="outClosePosition"
                  :label="$t('关键点2位置')"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="connectStatus"
                  :label="$t('连接状态')"
                >
                  <template slot-scope="scope">
                    <span
                      :style="`color:${
                        scope.row.connectStatus == 0 ? '#FF5562' : '#73F6AF'
                      }`"
                      >{{
                        scope.row.connectStatus == 0 ? $t("离线") : $t("在线")
                      }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="doorStatus"
                  :label="$t('开门关门状态')"
                  width="220"
                >
                  <template slot-scope="scope">
                    <span
                      style="color: #ff5562"
                      v-if="scope.row.connectStatus == 0"
                      >查询失败</span
                    >
                    <span v-else :style="`color:${scope.row.color}`">{{
                      stateMap[scope.row.doorStatus]
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="operation"
                  :label="$t('操作')"
                  width="140"
                >
                  <template slot-scope="scope">
                    <div class="table-btns">
                      <div
                        @click="editDoor(scope.row, 0)"
                        class="serch-btn cuver-point"
                      >
                        {{ $t("关门") }}
                      </div>
                    </div>
                    <!-- :class="scope.row.doorStatus == 0 ? 'btn-red' : ''" -->
                    <div class="table-btns">
                      <div
                        @click="editDoor(scope.row, 1)"
                        class="serch-btn cuver-point"
                      >
                        {{ $t("开门") }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('气象站')" name="2">
        <div v-if="showWeather">
          <!-- 实时信息 -->
          <div class="realTime">
            <div class="title">{{ $t("实时信息") }}</div>
            <el-row class="contain">
              <el-col :span="4">
                <div class="catalogue">
                  <div class="status">{{ $t("状态") }}：</div>
                  <div class="online">
                    {{
                      weatherDate.weatherStatus == 0 ? $t("离线") : $t("在线")
                    }}
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="detail">
                  <div class="lable">{{ $t("风速") }}：</div>
                  <div class="value">{{ weatherDate.windSpeed }}m/s</div>
                </div>
                <div class="detail">
                  <div class="lable">{{ $t("风向") }}：</div>
                  <div class="value">{{ weatherDate.windDirection }}</div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="detail">
                  <div class="lable">{{ $t("温度") }}：</div>
                  <div class="value">{{ weatherDate.temperature }}℃</div>
                </div>
                <div class="detail">
                  <div class="lable">{{ $t("湿度") }}：</div>
                  <div class="value">{{ weatherDate.humidity }}%RH</div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="detail">
                  <div class="lable">{{ $t("雨量") }}：</div>
                  <div class="value">{{ weatherDate.rainfall }}mm/h</div>
                </div>
                <div class="detail">
                  <div class="lable">{{ $t("大气压力") }}：</div>
                  <div class="value">{{ weatherDate.pressure }}Kpa</div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="detail">
                  <div class="lable">{{ $t("雪") }}：</div>
                  <div class="value">{{ weatherDate.snow }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 配置信息 -->
          <el-form
            :model="weatherDate"
            ref="formRef"
            :rules="formRules"
            size="small"
            :inline="true"
          >
            <div class="configuration">
              <div class="title">{{ $t("配置信息") }}</div>
              <el-row class="contain">
                <el-col :span="4">
                  <div class="catalogue">
                    <div class="status">{{ $t("基本配置") }}</div>
                  </div>
                </el-col>
                <el-col :span="20">
                  <el-row>
                    <el-col :span="6" style="display: flex; width: 418px">
                      <el-form-item
                        prop="weatherName"
                        :label="$t('气象站名称') + '：'"
                      >
                        <el-input
                          v-model="weatherDate.weatherName"
                          :placeholder="$t('请输入')"
                          size="medium"
                          disabled
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :offset="6" :span="6">
                      <el-form-item
                        prop="weatherIp"
                        :label="$t('IP地址') + '：'"
                      >
                        <el-input
                          v-model="weatherDate.weatherIp"
                          :placeholder="$t('请输入')"
                          size="medium"
                          disabled
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row class="contain">
                <el-col :span="4">
                  <div class="catalogue">
                    <div class="status">{{ $t("雨刷联动") }}</div>
                  </div>
                </el-col>
                <el-col :span="20">
                  <el-row>
                    <el-col>
                      <el-form-item
                        prop="wiper"
                        class="above"
                        :label="$t('雨量超过')"
                      >
                        <el-input
                          v-model="weatherDate.wiper[0]"
                          style="width: 80px"
                          placeholder
                          size="medium"
                          :disabled="disabled"
                        ></el-input>

                        <span>{{ $t("mmh时每") }}</span>
                        <el-input
                          v-model="weatherDate.wiper[1]"
                          prop="min"
                          style="width: 80px; margin-left: 20px"
                          placeholder
                          size="medium"
                          :disabled="disabled"
                        ></el-input>
                        <span>{{ $t("分钟来回刷") }}</span>
                        <el-input
                          v-model="weatherDate.wiper[2]"
                          prop="count"
                          style="width: 80px; margin-left: 20px"
                          placeholder
                          size="medium"
                          :disabled="disabled"
                        ></el-input>
                        <span>{{ $t("次") }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row class="contain">
                <el-col :span="4">
                  <div class="catalogue">
                    <div class="status">{{ $t("巡检联动") }}</div>
                  </div>
                </el-col>
                <el-col :span="20">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item
                        prop="badWeather"
                        :label="$t('恶劣天气联动') + ':'"
                      >
                        <el-radio-group
                          style="display: flex; flex-direction: column"
                          v-model="weatherDate.badWeather"
                          :disabled="disabled"
                        >
                          <el-radio :label="0">{{
                            $t("暂停巡检任务自动返回充电桩")
                          }}</el-radio>
                          <el-radio :label="1" style="margin-top: 24px">{{
                            $t("继续巡检任务")
                          }}</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :offset="4" :span="12">
                      <el-form-item
                        class="thresholdValue"
                        :label="$t('触发阈值') + ':'"
                      >
                        <!-- 第一行 -->
                        <el-row>
                          <el-select
                            placeholder=""
                            disabled
                            style="margin-left: 88px; width: 156px"
                            v-model="hyperthermia.key"
                            size="medium"
                          >
                            <el-option
                              :label="$t('高温')"
                              value="高温"
                            ></el-option>
                          </el-select>
                          <el-select
                            placeholder=""
                            disabled
                            size="medium"
                            v-model="hyperthermia.type"
                          >
                            <el-option label=">" value=">"></el-option>
                          </el-select>
                          <el-input
                            size="medium"
                            v-model="hyperthermia.value"
                            :disabled="disabled"
                          ></el-input>
                          <span>℃</span>
                        </el-row>
                        <!-- 第二行 -->
                        <el-row>
                          <el-select
                            placeholder
                            disabled
                            v-model="hypothermy.symbol"
                            size="medium"
                          >
                            <el-option :label="$t('或')" value="或"></el-option>
                          </el-select>
                          <el-select
                            placeholder
                            disabled
                            v-model="hypothermy.key"
                            size="medium"
                            style="width: 156px"
                          >
                            <el-option
                              :label="$t('低温')"
                              value="低温"
                            ></el-option>
                          </el-select>
                          <el-select
                            placeholder
                            disabled
                            v-model="hypothermy.type"
                            size="medium"
                          >
                            <el-option label="<" value="<"></el-option>
                          </el-select>
                          <el-input
                            placeholder
                            size="medium"
                            v-model="hypothermy.value"
                            :disabled="disabled"
                          ></el-input>
                          <span>℃</span>
                        </el-row>
                        <!-- 第三行 -->
                        <el-row>
                          <el-select
                            placeholder
                            disabled
                            size="medium"
                            v-model="windSpeed.symbol"
                          >
                            <el-option :label="$t('或')" value="或"></el-option>
                          </el-select>
                          <el-select
                            disabled
                            placeholder
                            v-model="windSpeed.key"
                            size="medium"
                            style="width: 156px"
                          >
                            <el-option
                              :label="$t('风速')"
                              value="风速"
                            ></el-option>
                          </el-select>
                          <el-select
                            placeholder
                            disabled
                            v-model="windSpeed.type"
                            size="medium"
                          >
                            <el-option label=">=" value=">="></el-option>
                          </el-select>
                          <el-input
                            placeholder
                            v-model="windSpeed.value"
                            size="medium"
                            :disabled="disabled"
                          ></el-input>
                          <span>m/s</span>
                        </el-row>
                        <!-- 第四行 -->
                        <el-row>
                          <el-select
                            placeholder
                            disabled
                            v-model="rainfall.symbol"
                            size="medium"
                          >
                            <el-option :label="$t('或')" value="或"></el-option>
                          </el-select>
                          <el-select
                            disabled
                            placeholder
                            size="medium"
                            v-model="rainfall.key"
                            style="width: 94px"
                          >
                            <el-option
                              :label="$t('雨量')"
                              value="雨量"
                            ></el-option>
                          </el-select>
                          <el-select
                            placeholder
                            disabled
                            v-model="rainfall.type"
                            size="medium"
                          >
                            <el-option label=">" value=">"></el-option>
                          </el-select>
                          <el-input
                            placeholder
                            v-model="rainfall.value"
                            size="medium"
                            :disabled="disabled"
                          ></el-input>
                          <span>mm/h</span>
                        </el-row>
                        <!-- 第五行 -->
                        <el-row>
                          <el-select
                            size="medium"
                            placeholder
                            disabled
                            v-model="snow.symbol"
                          >
                            <el-option :label="$t('或')" value="或"></el-option>
                          </el-select>
                          <el-select
                            size="medium"
                            placeholder
                            disabled
                            v-model="snow.key"
                            style="width: 94px"
                          >
                            <el-option :label="$t('雪')" value="雪"></el-option>
                          </el-select>
                          <el-select
                            style="width: 266px"
                            placeholder
                            v-model="snow.value"
                            size="medium"
                            :disabled="disabled"
                          >
                            <el-option
                              :label="$t('下雪')"
                              value="下雪"
                            ></el-option>
                          </el-select>
                        </el-row>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <div class="contain">
                <div class="footer" v-if="disabled">
                  <div @click="editForm" class="serch-btn cursor-pointer">
                    {{ $t("编辑") }}
                  </div>
                </div>
                <div v-else class="footer">
                  <div @click="save" class="serch-btn cursor-pointer">
                    {{ $t("保存") }}
                  </div>
                  <div @click="handleCancel" class="reset-btn">
                    {{ $t("取消") }}
                  </div>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <div v-else class="unconnect">
          <div class="box">
            <img src="../../../assets/images/unconnect.png" alt="" />
            <div>{{ $t("暂无气象站请先在运维部署工具添加") }}</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
/**
 * 部署查看-附属设备
 */
import {
  API_getchargeName,
  API_getdooInfo,
  API_getweatherInfo,
  API_saveweatherInfo,
  API_doorControl,
} from "@/api/deploy/accesequip.js";
export default {
  data() {
    // 自定义校验规则 方法
    let relusList = (rules, value, callback) => {
      if (this.weatherDate.wiper.length !== 3) {
        return callback(new Error(this.$t("请完整添写时分次")));
      } else {
        return callback();
      }
    };
    return {
      accesequipType: "0", //tabs type
      // 结束日期
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.listQuery.startTime;
          if (beginDateVal) {
            return (
              time.getTime() <
              new Date(beginDateVal).getTime() + 1 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
      listQuery: {
        chargeName: null,
        doorName: null,
        doorTypes: [],
      },
      total: 0,
      listQuerySubmit: {},
      cdzTableData: [],
      tableData: [],
      // 触发阈值-高温
      hyperthermia: {
        key: "高温",
        value: "", //高温
        type: ">",
        symbol: "",
      },
      // 触发阈值-低温
      hypothermy: {
        symbol: "或",
        key: "低温",
        type: "<",
        value: "", //低温
      },
      // 触发阈值-风速
      windSpeed: {
        symbol: "或",
        key: "风速",
        type: ">=",
        value: "", //风速
      },
      // 触发阈值-雨量
      rainfall: {
        symbol: "或",
        key: "雨量",
        type: ">",
        value: "", //雨量
      },
      // 触发阈值-下雪
      snow: {
        symbol: "或",
        key: "雪",
        type: "",
        value: "",
      },
      // 气象站接入前后
      showWeather: true,
      weatherDate: {
        wiper: [],
      }, //气象信息
      // 表单校验
      formRules: {
        weatherName: [
          {
            required: true,
            message: this.$t("气象站名称不能为空"),
            trigger: "blur",
          },
        ],
        weatherIp: [
          { required: true, message: this.$t("IP不能为空"), trigger: "blur" },
        ],
        wiper: [{ required: true, validator: relusList, trigger: "blur" }],
        badWeather: [
          {
            required: true,
            message: this.$t("恶劣天气联动不能为空"),
            trigger: "change",
          },
        ],
      },
      disabled: true,
      time: "",
      stateMap: {
        0: this.$t("关门中"),
        1: this.$t("关门成功"),
        2: this.$t("关门失败"),
        3: this.$t("开门中"),
        4: this.$t("开门成功"),
        5: this.$t("开门失败"),
        6: this.$t("查询失败"),
      },
    };
  },
  watch: {
    accesequipType(val) {
      this.accesequipType = val;
      this.getTableList();
    },
  },
  created() {
    this.listQuerySubmit = Object.assign({}, this.listQuery);
  },
  mounted() {
    this.getTableList();
    // this.time = setInterval(() => {
    // this.getTableList();
    // }, 1000);
  },
  methods: {
    /** 重置按钮操作 */
    resetFormBtn(formName) {
      this.listQuery = {
        chargeName: null,
        doorName: null,
        doorTypes: [],
      };
      this.serachBtn();
    },
    /**搜索 */
    serachBtn() {
      this.listQuerySubmit = Object.assign({}, this.listQuery);
      this.getTableList();
    },
    /**采集资源数据 */
    getTableList() {
      if (this.accesequipType == 0) {
        API_getchargeName({ chargeName: this.listQuerySubmit.chargeName }).then(
          (res) => {
            if (res.code == 200) {
              this.cdzTableData = res.rows;
            }
            this.total = Number(res.total);
            this.listQuery = Object.assign({}, this.listQuerySubmit);
          }
        );
      } else if (this.accesequipType == 1) {
        setInterval(() => {
          this.getDoorData();
        }, 1000);
      } else if (this.accesequipType == 2) {
        API_getweatherInfo()
          .then((res) => {
            if (res.code == 200) {
              if (res.data) {
                this.showWeather = true;
                this.weatherDate = res.data;
                this.weatherDate.wiper = this.weatherDate.wiper.split(",");
                let that = this;
                this.weatherDate.triggerThreshold.forEach((item) => {
                  switch (item.key) {
                    case "高温":
                      that.hyperthermia.value = item.value;
                      break;
                    case "低温":
                      that.hypothermy.value = item.value;
                      break;
                    case "风速":
                      that.windSpeed.value = item.value;
                      break;
                    case "雨量":
                      that.rainfall.value = item.value;
                      break;
                    case "雪":
                      that.snow.value = item.value;
                      break;
                  }
                });
              }
            } else {
              this.weatherDate = {};
            }
          })
          .finally(() => {
            // loading.close();
          });
      }
    },
    //获取门的信息
    getDoorData() {
      let doorTypes = this.listQuerySubmit.doorTypes;
      if (doorTypes && doorTypes.length > 0) {
        if (doorTypes.indexOf(",") == -1) {
          doorTypes = String(doorTypes);
        } else {
          doorTypes = doorTypes.join(",");
        }
      }
      API_getdooInfo({
        doorName: this.listQuery.doorName,
        doorTypes: doorTypes,
      })
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.rows;
            this.tableData.forEach((item) => {
              if (
                item.doorStatus === 2 ||
                item.doorStatus === 5 ||
                item.doorStatus === 6
              ) {
                item.color = "rgba(255, 76, 94, 1)";
              } else {
                item.color = "rgba(0, 217, 148, 1)";
              }
            });
          }
          this.total = Number(res.total);
          this.listQuery = Object.assign({}, this.listQuerySubmit);
        })
        .finally(() => {
          // loading.close();
        });
    },
    /**
     * 编辑
     */
    editForm() {
      this.disabled = false;
    },
    /**保存 */
    save() {
      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          let arr = [
            this.hyperthermia,
            this.hypothermy,
            this.windSpeed,
            this.rainfall,
            this.snow,
          ];
          let obj = {
            weatherId: this.weatherDate.weatherId,
            weatherName: this.weatherDate.weatherName,
            weatherIp: this.weatherDate.weatherIp,
            wiper: this.weatherDate.wiper.toString(),
            badWeather: this.weatherDate.badWeather,
            triggerThreshold: arr,
          };
          API_saveweatherInfo(obj).then((res) => {
            if (res.code == 200) {
              this.disabled = true;
              this.$message.success(this.$t("保存成功"));
            }
          });
        }
      });
    },
    /**取消 */
    handleCancel() {
      this.getTableList();
    },
    editDoor(row, doorStatus) {
      let values = [row.doorId];
      if (doorStatus == 0) {
        // 关门
        API_doorControl({ cmd: "2X65", values: values }).then((res) => {
          if (res.code == 200 && res.data.nerrcode == 0) {
            this.$message.success(this.$t("关门命令发送成功"));
          } else {
            this.$message.error(this.$t("关门命令发送失败"));
          }
        });
      } else {
        // 开门
        API_doorControl({ cmd: "2X64", values: values }).then((res) => {
          if (res.code == 200 && res.data.nerrcode == 0) {
            this.$message.success(this.$t("开门命令发送成功"));
          } else {
            this.$message.error(this.$t("开门命令发送失败"));
          }
        });
      }
    },
  },
  filters: {
    getStatus(val) {
      let status = "";
      switch (val) {
        case 0:
          status = "离线";
          break;
        case 1:
          status = "离线";
          break;
        case 2:
          status = "在线";
          break;
        case 3:
          status = "服务未开启";
          break;
      }
      return status;
    },
    getDoors(val) {
      let doors = "";
      switch (val) {
        case "0":
          doors = "防火门";
          break;
        case "1":
          doors = "卷帘门";
          break;
        case "2":
          doors = "对开门";
          break;
        case "3":
          doors = "挡鼠板";
          break;
      }
      return doors;
    },
  },
  destroyed() {
    //清除设备定时器
    clearInterval(this.time);
    this.time = null;
  },
};
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  height: 738px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 24px;
  box-sizing: border-box;
  .btns {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    div:nth-child(2) {
      margin: 0 16px;
    }
  }
  .table-btns {
    display: inline-block;
    margin-right: 4px;
    div {
      display: flex;
      width: 46px;
      height: 28px;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    div:nth-child(2) {
      margin: 0 10px;
    }
  }
}
.title {
  font-size: 18px;
  color: #00d1ff;
  font-weight: bold;
}
.realTime {
  width: 100%;
  padding: 24px 24px 0px 24px;
  .contain {
    border-top: 1px dashed #243845;
    .catalogue {
      font-size: 18px;
      display: flex;
      .status {
        opacity: 0.7;
        color: #ffffff;
      }
      .online {
        position: relative;
        font-weight: bold;
        color: #00d1ff;
        padding-left: 15px;
      }
      .online::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        content: "";
        width: 6px;
        height: 6px;
        background: #00d1ff;
        border-radius: 50%;
      }
    }
  }
  .contain:nth-child(2) {
    border-top: 0px dashed #dbfffb;
  }
}
.configuration {
  margin-top: 16px;
  width: 100%;
  padding: 24px 24px 0px 24px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);

  .contain {
    border-top: 1px dashed #243845;
    .catalogue {
      font-size: 18px;
      display: flex;
      .status {
        color: #ffffff;
      }
    }
  }
  .contain:nth-child(2) {
    border-top: 0px dashed #dbfffb;
  }
}
.contain {
  padding: 24px 0;
  .el-col {
    .detail {
      display: flex;
      margin-top: 20px;
      .lable {
        font-size: 14px;
        color: #ffffff;
        opacity: 0.7;
        white-space: nowrap;
      }
      .value {
        font-size: 14px;
        color: #ffffff;
      }
    }
    .detail:first-child {
      margin-top: 0;
    }
  }
  //底部
  .footer {
    height: 76px;
    display: flex;
    justify-content: center;
    align-items: center;
    div:nth-child(2) {
      margin-left: 16px;
    }
  }
}
.above {
  span {
    color: #fff;
    font-size: 16px;
    margin-left: 10px;
  }
}
.thresholdValue {
  .el-row {
    margin-bottom: 8px;
  }
  .el-select {
    width: 80px;
    margin-right: 8px;
  }
  .el-input {
    width: 178px;
  }
  span {
    color: #fff;
    font-size: 16px;
    margin-left: 8px;
  }
}
.unconnect {
  width: 100%;
  min-height: 904px;
  position: relative;
  .box {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      display: inline-block;
      width: 252px;
      height: 264px;
    }
    div {
      font-size: 16px;
      color: #ffffff;
      margin-top: 24px;
    }
  }
}

// 弹框内部样式
.el-dialog {
  position: relative;
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }
  .line-one {
    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
    .confirm-font {
      display: inline-block;
      margin-left: 16px;
    }
    .warn-font {
      color: #ffad30;
    }
  }
  .line-two {
    margin-top: 22px;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}
// 小手样式
.cuver-point {
  cursor: pointer;
}
::v-deep {
  .el-tabs__item {
    min-width: 50px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
  }
  .el-tabs__nav-wrap::after {
    background-color: rgba(241, 243, 249, 0.2) !important;
  }
  .el-tabs__nav-scroll {
    padding: 0 35px;
  }
  .el-tabs__item.is-active {
    color: rgba(0, 209, 255, 1);
  }
  .el-tabs__active-bar {
    width: 50px !important;
    left: -5px;
    background-color: rgba(0, 209, 255, 1);
  }
}
::v-deep {
  .el-dialog:not(.is-fullscreen) {
    margin-top: 30vh !important;
  }
  .el-form-item__label {
    color: #d5d5d5 !important;
  }
}
</style>
